import { CaseConfigType } from '@shared';
import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { SelectButtonComponent } from './select-button/select-button.component';
import { CardComponent } from './card/card.component';
import { SelectButtonIconComponent } from './select-button-icon/select-button-icon.component';

export const RadioConfig: CaseConfigType = {
  location: 'Radio',
  description: `页面中提供多个枚举选项，供用户进行单选时使用。提供原生的单选框样式、选择按钮和自定义选项样式。
  结合 Group 组件，可对单选组进行横向、纵向自由排列，自定义间隔、列数等。`,
  description_en: `Multiple enumeration options are provided in the page for users to use in radio selection. Provides native radio box styles, SelectButton, and custom option styles.
  Combined with the group component, you can arrange the radio groups horizontally and vertically freely, and customize the interval, number of columns, etc.`,
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/radio/demo1/demo1.component',
      demoTitle: '基础',
      demoDescription: '基础的 radio 使用。',
      demoTitle_en: 'Basic',
      demoDescription_en: 'Basic use of radio.',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/radio/demo2/demo2.component',
      demoTitle: '状态控制',
      demoDescription: '状态由外部完全控制',
      demoTitle_en: 'Status Control',
      demoDescription_en: 'The status is fully controlled by the outside.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/radio/demo3/demo3.component',
      demoTitle: '单选组',
      demoDescription: '提供单选框组功能，结合 Group 组件搭配使用，灵活布局，适配各种场景。',
      demoTitle_en: 'Radio Group',
      demoDescription_en: `It provides features of radio group, which can be used in combination with Group component to make flexible layout and adapt to various scenes.`,
    },
    {
      demo: SelectButtonComponent,
      codePath: 'showcase/radio/select-button/select-button.component',
      demoTitle: '选择按钮-纯文本按钮型',
      demoDescription: '选择按钮样式风格的有框单选组。',
      demoTitle_en: 'SelectButton (Button)',
      demoDescription_en: 'SelectButton for button shape.',
    },
    {
      demo: SelectButtonIconComponent,
      codePath: 'showcase/radio/select-button-icon/select-button-icon.component',
      demoTitle: '选择按钮-图标文本、图标',
      demoDescription: `选择按钮样式风格的有框单选组，包含图标文本组合、图标组合,其中图标组合需要配合class="lv-icon-only-radio-btn-group"使用。`,
      demoTitle_en: 'SelectButton (Button),icon text combination,icon combination',
      demoDescription_en: `SelectButton for button shape includes icon text combination,icon combination.The icon combination must be used together with the class="lv-icon-only-radio-btn-group".`,
    },
    {
      demo: CardComponent,
      codePath: 'showcase/radio/card/card.component',
      demoTitle: '卡片式单选',
      demoDescription: '可自由自定义选项的风格样式，多用于卡片式单选，整个区域可选。',
      demoTitle_en: 'Custom Style',
      demoDescription_en: `The style of user-defined options is mostly used for card check, the whole area can be selected. Most are used for card check.`,
    },
  ],
  mApi: [
    {
      name: 'lv-radio',
      name_en: 'lv-radio',
      selector: 'lv-radio',
      snippet: `<label lv-radio [ngModel]='\${1:true}'>\${2:Radio}</label>`,
      api: [
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '是否禁用单选框。',
          description_en: 'Whether the radio is disabled.',
        },
        {
          attribute: 'lvViewType',
          type: 'string',
          default: 'default',
          description: `单选框的视图类型 ( 'default' | 'button' | 'link' | 'custom' ), 当设置为 'custom' 时，需要自定义视图。`,
          description_en: `The view type of the radio box ('default '|'button' |'link '|'custom'). When it is set to 'custom', you need to customize the view.`,
        },
        {
          attribute: 'lvButtonSize',
          type: 'string',
          default: 'default',
          description: `该属性只在 lvViewType 为 button 和 link 时生效，设置选择按钮的大小 ( 'default' | 'small' )。`,
          description_en: `This property only takes effect when lvViewType is 'button' or 'link', and sets the size of the selection button ('default '|' small ').`,
        },
        {
          attribute: 'ngModel',
          type: 'boolean',
          default: 'false',
          description: '单选框是否选中，可双向绑定。',
          description_en: 'Radio box value, it can be bound in two directions.',
        },
        {
          attribute: 'lvValue',
          type: 'string',
          default: 'null',
          description: '单选框的唯一标识，仅在 lv-radio-group 中配合使用，用以标识单选组中的选中项。',
          description_en: `The unique identification of the radio box. It is only used in lv-radio-group to identify the selected items in the radio group.`,
        },
        {
          attribute: 'lvControl',
          type: 'boolean',
          default: 'false',
          description: `状态完全控制，设置为 true 时，状态由外部完全控制，在状态切换时可实现异步/同步的事件处理。注：此时 ngModel 属性的双向绑定无效，只能作为输入属性使用。`,
          description_en: `The state is fully controlled. When set to true, the state is fully controlled by the outside. When the state is switched, asynchronous / synchronous event processing can be realized. Note: at this time, the two-way binding of ngModel property is invalid and can only be used as an input property.`,
        },
      ],
      event: [
        {
          event: 'ngModelChange',
          parameter: `value`,
          description: '选择状态变化时的回调函数。参数为单选框的状态 (boolean: true | false)。',
          description_en: 'Callback function when the state changes. Parameter is the status of the radio box (Boolean: true | false).',
        },
      ],
    },
    {
      name: 'lv-radio-group',
      name_en: 'lv-radio-group',
      selector: 'lv-radio-group',
      snippet: `
        <lv-radio-group [(ngModel)]="\${1:selected}">
          <lv-group [lvGutter]="'16px'">
            <lv-radio [lvValue]="\${2:item001}">\${3:item001}</lv-radio>
            <lv-radio [lvValue]="\${4:item002}">\${5:item002}</lv-radio>
            <lv-radio [lvValue]="\${6:item003}">\${7:item003}</lv-radio>
          </lv-group>
        </lv-radio-group>
      `,
      api: [
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '是否禁用组下的所有单选框。',
          description_en: 'Whether to disable all radio boxes under the group.',
        },
        {
          attribute: 'lvGroupName',
          type: 'string',
          default: 'null',
          description: `lv-radio-group 下所有 radio 的 name 属性，配置后在浏览器中作为真正的组，可使用方向键在组中循环改变选中项。`,
          description_en: `The name attribute of all radios under lv-radio-group can be used as the real group in the browser after configuration. You can use the direction key to cycle through the selected items in the group.`,
        },
        {
          attribute: 'ngModel',
          type: 'string<value: string>',
          default: 'null',
          description: '单选组的中当前选中项，可双向绑定。',
          description_en: 'The currently selected item in the radio group. It can be bound in two directions.',
        },
      ],
      event: [
        {
          event: 'ngModelChange',
          parameter: `string<value: string>`,
          description: '单选组的选择状态变化时的回调函数。参数为单选组中当前选中项的 value 值。',
          description_en: `Callback function when the selection status of radio group changes. The parameter is the value of the currently selected item in the radio group.`,
        },
      ],
    },
  ],
};
